<script lang="ts" setup>
	//评论
	import { reactive, ref } from "vue";
	import {
		useRouter
	} from 'uni-mini-router'
	import {
		getCurrentInstance
	} from 'vue'
	import {
		onShow,
		onHide,
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		userStore
	} from '@/pinia';
	let router = useRouter()
	const userStoreInfo = userStore();
	const {
		proxy,
	} = getCurrentInstance()
	let itemObj = ref(null)
	onLoad((option) => {
		itemObj.value = JSON.parse(option.item)
		console.log(JSON.parse(option.item));
	})
	const routerLink = (e) => {
		proxy.$req('POST', proxy.$api.pingjia, {
			orderId: itemObj.value.id,
			star: rateValue.value,
			comment: textereaValue.value,
			imageList: JSON.stringify(fileList1.value)
		}).then((res) => {
			uni.$u.toast(res.message)
			if (res.success) {
				router.push({
					name: e,
					params: {
					}
				})
			}
		})
	}
	let rateValue = ref('0')
	let textereaValue = ref('')
	let fileList1 = ref([])
	const afterRead = (e) => {
		console.log(e);
		const item = e.file;
		uni.showLoading({
			title: '上传中',
		})
		for (let a = 0; a <= item.length; a++) {
			uni.uploadFile({
				url: proxy.$uploadUrl + proxy.$api.uploadFile,
				filePath: item[a].url,
				name: 'file',
				formData: {
					file: item[a].url,
				},
				success: (uploadFileRes) => {
					console.log(JSON.parse(uploadFileRes.data));
					if (!JSON.parse(uploadFileRes.data).success) {
						uni.showToast({
							title: JSON.parse(uploadFileRes.data).message,
							icon: 'none'
						})
						return
					}
					let result = JSON.parse(uploadFileRes.data).result
					uni.hideLoading()
					fileList1.value.push(
						Object.assign({}, {
							url: result,
						})
					);
					console.log(fileList1.value);
				},
				complete() { }
			});
		}
	}
	const deletePic = (e) => {
		console.log(e);
		fileList1.value.splice(e.index, 1)
	}
</script>
<template>
	<view class="" v-if="itemObj!=null">
		<view class="evaTop c-flex-center-center" v-for="(it,key) in itemObj.orderInfoList" :key="key">
			<view class="r-flex-start-start">
				<image :src="it.sku.logo" mode=""></image>
				<view class="c-flex-start-start etRight">
					<text class="u-line-1">{{ it.productName }}</text>
					<text>规格 {{ it.sku.specIdsName }}</text>
				</view>
			</view>
			<view class="star r-flex-start-center">
				<text style="margin-right: 20rpx;font-size: 32rpx;font-weight: 500;color: rgba(0,0,0,0.85);">商品评价</text>
				<u-rate :count="5" v-model="rateValue" size="48rpx"></u-rate>
			</view>
		</view>
	</view>
	<view class="area">
		<u--textarea v-model="textereaValue" placeholder="请输入内容" height="312rpx" border="none"></u--textarea>
	</view>
	<view class="upload">
		<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
			:maxCount="5"></u-upload>
	</view>
	<view class="subEva" @click="routerLink('evaluateSuccess')">
		提交评价
	</view>
</template>
<style lang="scss">
	page {
		background-color: #FAFAFA;
	}

	.evaTop {
		box-sizing: border-box;
		width: 686rpx;
		margin: 20rpx auto;
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;
		padding: 32rpx;

		image {
			width: 176rpx;
			height: 176rpx;
			margin-right: 15rpx;
		}

		.etRight {
			width: 426rpx;
			margin-top: 10rpx;

			text:nth-child(1) {
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.85);
			}

			text:nth-child(2) {
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.45);
				margin-top: 14rpx;
			}
		}
	}

	.star {
		width: 686rpx;
		margin: 20rpx auto;
	}

	.star::before {
		content: none;
	}

	.area {
		width: 686rpx;
		height: 312rpx;
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;
		margin: 20rpx auto 70rpx;
	}

	.upload {
		width: 686rpx;
		margin: 20rpx auto;
	}

	.subEva {
		width: 686rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background: #CB645E;
		border-radius: 16rpx;
		position: fixed;
		bottom: 70rpx;
		left: 32rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #FFFFFF;
	}
</style>